<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-11 16:45:23
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-15 23:14:06
 * @Description: 
-->
<template>
  <div>
     
    <el-upload
      class="avatar-uploader"
      action="http://localhost:3001/upload/common/"
      :headers="headers"
      :limit="1"
      :data="data"
      accept=".jpg,.png,.jpeg"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
    >
      <el-image v-if="imageUrl" :src="imageUrl" class="avatar"></el-image>
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>

      <template #defualt>
        <div>
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <el-icon><zoom-in /></el-icon>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <el-icon><Download /></el-icon>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>


    <!-- <el-dialog title="图片裁剪" v-model="isDialogShow">
    </el-dialog> -->
  </div>
</template>
 
<script setup>
import {
  ref,
  computed,
  watch,
  reactive,
  defineProps,
  defineEmits,
  onMounted,
} from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
//引入vue-img-cutter
import ImgCutter from "vue-img-cutter";

const imgCutterModal = ref(null);
// const handleOpen = ()=>{
onMounted(() => {
  console.dir(imgCutterModal);
  console.log(imgCutterModal.value);
});
// }
// handleOpen()
// imgCutterModal.value.handleOpen({
//   src:'http://localhost:3001/images/avatar/default.jpg',
//   name:'avatar.jpg'
// })
let testImg = {
  src: "http://localhost:3001/images/avatar/default.jpg",
  name: "avatar.jpg",
};

// 请求头配置
const headers = {
  Authorization: `Bearer ${sessionStorage.token}`,
};
let isDialogShow = ref(true);
// const imageUrl = ref("");
const props = defineProps({
  modelValue: String,
  dataType: {
    type: String,
    required: true,
    default: "common",
  },
});
const emit = defineEmits(["update:modelValue"]);

// 初始化预览图
const imageUrl = ref(props.modelValue);

// 参数
const data = {
  type: props.dataType,
};

// 图片上传url侦听
watch(imageUrl, (newValue, oldValue) => {
  emit("update:modelValue", newValue);
});

/**
 * @description: 返回响应时执行的方法
 * @return {*}
 * @param {*} response 响应
 * @param {*} uploadFile 上传的文件
 */
const handleAvatarSuccess = (response, uploadFile) => {
  // 上传成功
  if (response.status) {
    imageUrl.value = response.src;
    ElMessage({
      type: "success",
      message: response.msg,
    });
  }
  // 上传失败
  else {
    ElMessage({
      type: "error",
      message: "上传图片失败",
    });
  }
};

/**
 * @description: 发出请求之前的处理
 * @return {*}
 * @param {*} rawFile 选择的文件
 */
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile);
  if (!/^image\/(jpeg|png|jpg)$/.test(rawFile.type)) {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const cutDown = (testImg) => {
  console.log(testImg);
};
</script>

<style lang='less' scoped>
.img-box {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    overflow: hidden;
  }
  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

